<template>
  <div style="width: 100%;height: 100%" class="home-main">
    <!--    第一部分-->
    <div style="width: 100%;margin-bottom: 120px">
      <div style="margin:120px 0 40px 0;align-items:center;flex-direction: column" class="fixed-row">
        <h2 style="font-size: 46px;color: #1c1f24">{{formData.title}}</h2>
        <p style="margin-top: 5px;font-size: 16px;color: #666666">Contact us</p>
        <p style="width: 20px;height: 2px;background: #0d54eb;margin-top: 10px"></p>
      </div>
      <div style="width: 100%;justify-content: center;" class="fixed-row">
        <div style="width: 60%;justify-content: center;align-items: flex-start" class="fixed-row">
          <div>
            <img :src="formData.imageUrl" style="width: 400px;height: 400px">
            <div style="margin: 10px 0">{{formData.contextTraffic}}</div>
            <div style="margin: 10px 0">{{formData.contextTwo}}</div>
          </div>
          <div style="margin-left: 50px">
<!--            公司logo-->
           <div v-html="formData.context" class="ql-editor"></div>
          </div>
        </div>
      </div>
    </div>

    <div style="width: 100%;height: 50px;background: #353334;color: #fff;line-height:50px;text-align: center;font-size: 14px;">
      Copyright© 2014-2018 All Rights Reserved 版权所有 杭州蓝启 | 京ICP备14045740号-1 | 京公网安备 11011402010147号
    </div>
  </div>
</template>

<script setup lang="ts">
  import {getHomeList} from '~/api/phoneMy'
  const formData = reactive({})
  onMounted(()=>{
    getTableDetail()
  })
  async function getTableDetail(){
    const res = await getHomeList()
    console.log(res.data.records[0],'res.data.records[0]')
    Object.assign(formData,{
      ...res.data.records[0]
    })
  }
</script>

<style scoped>

</style>
